﻿/**
 * for Product.html
 */

// 分类选择元素
const allProduct = $Id('li_one')
const sortProduct = $Id("li_two");
const triangle = $Id("triangle");
const sortDiv = $Id("sort");

// 分类展示元素
const sortLis = document.getElementsByClassName('sort-li');
for (let i = 0; i < sortLis.length; i++) {
    // 分类列表的绑定
    sortLis[i].addEventListener('mouseover', sortOver)
    sortLis[i].addEventListener('mouseout', sortOut)
}
const sortTitle = $Class("title");
const sortText = $Class("text");

// 主展示元素
const img_1 = $Class('img_1');
const img_2 = $Class('img_2');
const img_3 = $Class('img_3');
const img_4 = $Class('img_4');
const img_5 = $Class('img_5');
const img_6 = $Class('img_6');
const img_7 = $Class('img_7');
const img_8 = $Class('img_8');
const img_9 = $Class('img_9');
const imgList = [img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9];
const littleText = $Class('little_text');
const littleTitle = $Class("little_title");


// 选择展示分类
function chooseSort(isSort) {
    if (isSort) {
        sortDiv.style.display = "block";
        triangle.style.display = "block";
        allProduct.style.color = "#0d90fe";
        sortProduct.style.color = "#000000";
    } else {
        sortDiv.style.display = "none";
        triangle.style.display = "none";
        allProduct.style.color = "#000000";
        sortProduct.style.color = "#0d90fe";
    }
}

// 产品类别的mouseover
function sortOver(elem) {
    // 更改展示的图片
    img_1.style.backgroundImage = "url(../imgs/" + elem.target.innerHTML + ".png)";
    // 更改展示的标题
    sortTitle.innerHTML = elem.target.innerHTML;
    // 展示
    sortText.style.display = 'block';
    img_2.style.display = 'none';
    img_3.style.display = 'none';
}

// 产品类别的mouseout
function sortOut() {
    // 隐藏
    img_1.style.backgroundImage = "";
    sortText.style.display = 'none';
    img_2.style.display = 'block';
    img_3.style.display = 'block';
}

// 主展示的mouseover
function productOver(index) {
    switch (index) {
        case 1:
            setProduct(img_2, '10px', '-900px 0px 0px 300px')
            break;
        case 2:
            setProduct(img_3, '10px', '-900px 0px 0px 625px', '芝士蛋糕')
            break;
        case 3:
            setProduct(img_2, '', '-900px 0px 0px 310px', '闪电泡芙')
            break;
        case 4:
            setProduct(img_5, '10px', '-600px 0px 0px 300px', '慕斯甜甜圈')
            break;
        case 5:
            setProduct(img_6, '10px', '-600px 0px 0px 625px', '软欧圈')
            break;
        case 6:
            setProduct(img_5, '', '-600px 0px 0px 310px', '麦芬圈')
            break;
        case 7:
            setProduct(img_8, '10px', '-300px 0px 0px 300px', '起酥圈')
            break;
        case 8:
            setProduct(img_9, '', '-300px 0px 0px 625px', '常规蛋糕');
            break;
        case 9:
            setProduct(img_8, '10px', '-300px 0px 0px 310px', '果汁茶饮');
            break;
    }
}

// 主展示的mouseout
function productOut(index) {
    // 微调index
    if (index % 3 === 0) index -= 1;
    else index += 1;
    imgList[index - 1].style.display = 'block';
    littleText.style.display = 'none';
}

// 展示产品介绍
function setProduct(elem, left = '', margin = '', text = littleTitle.innerHTML) {
    elem.style.display = 'none';
    littleText.style.display = 'block';
    littleText.style.left = left;
    littleText.style.margin = margin;
    littleTitle.innerHTML = text;
}

function $Id(elemId) {
    return document.getElementById(elemId)
}

function $Class(elemClass) {
    return document.getElementsByClassName(elemClass)[0]
}
